<template>
  <!--搜索框-->
  <div>
    <form action="">
      <input type="text" v-model="word">
      <input type="button" value="搜索" @click="search">
    </form>

    <table v-if="show">
      <tr>
        <td>单词</td>
        <td>考频</td>
        <td>释义</td>
        <td>笔记</td>
      </tr>
      <tr v-for="word in words" :key="word.id">
        <td>{{ word.word }}</td>
        <td>{{ word.frequency }}</td>
        <td>{{ word.meaning }}</td>
        <td>{{ word.note }}</td>
        <input type="button" value="添加笔记" @click="addnote(word.id)">
        <input type="button" value="清空笔记" @click="deletenote(word.id)">
      </tr>
    </table>
  </div>
</template>

<script>

import axios from 'axios'

export default {
  name: 'test2',
  data () {
    return {
      word: '',
      words: [],
      show: false,
      form: {
        note: ''
      }
    }
  },
  methods: {
    search () {
      let url = 'http://localhost:8081/word/query/' + this.word

      axios.get(url).then(response => {
        this.words = response.data.data
        this.show = true
      }
      )
    },
    addnote (id) {
      let url = 'http://localhost:8081/word/addnote/' + id
      this.form.note = '笔记哈哈哈哈'
      axios.post(url, this.form).then(response => {
        console.log(response.data)
      }
      )
    },
    deletenote (id) {
      let url = 'http://localhost:8081/word/deletenote/' + id
      axios.get(url).then(response => {
        console.log(response.data)
      }
      )
    }
  }
}
</script>
<style scoped>
/* .el-main{
  height: 500px
} */
.search {
  width: 30%;
  margin: 0 0 40px 10px;
  height: 40px;
  border: 1px solid #f2f2f2;
}

.text {
  font-size: 14px;
  margin-bottom: 10px;
  list-style: none;
}

.box-card {
  margin: auto;
  /* position: absolute; */
  width: 30%;
  top: 200px;
}
</style>
